<template lang="pug">
  .weui-tab(v-if='navVisible')
    .weui-tab__panel
    .weui-tabbar
      nuxt-link.weui-tabbar__item(v-for='(item, index) in navList' :to='item.path' :key='index')
        div.weui-tabbar__icon(v-if='index === 0')
          img(v-if='activeRoute !== item.name' src='~/static/toolbar/home.png')
          img(v-else src='~/static/toolbar/home@selected.png')
        div.weui-tabbar__icon(v-else-if='index === 1')
          img(v-if='activeRoute !== item.name' src='~/static/toolbar/category.png')
          img(v-else src='~/static/toolbar/category@selected.png')
        div.weui-tabbar__icon(v-else-if='index === 2')
          img(v-if='activeRoute !== item.name' src='~/static/toolbar/cart.png')
          img(v-else src='~/static/toolbar/cart@selected.png')
        div.weui-tabbar__icon(v-else)
          img(v-if='activeRoute !== item.name' src='~/static/toolbar/my.png')
          img(v-else src='~/static/toolbar/my@selected.png')
        p.weui-tabbar__label {{ item.text }}
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          'path': '/',
          'name': 'index',
          'text': '主页'
        },{
          'path': '/classify',
          'name': 'classify',
          'text': '分类'
        },{
          'path': '/shopping',
          'name': 'shopping',
          'text': '购物车'
        },{
          'path': '/user',
          'name': 'user',
          'text': '我的'
        }

      ]
    }
  },
  computed: {
    activeRoute() {
      console.log(this.$route.name)
      return this.$route.name
    },
    navVisible() {
      return ['index', 'classify', 'shopping', 'user'].indexOf(this.activeRoute) > -1
    }
  }
}
</script>
<style scoped lang="sass">
.weui-tab
  position: static
.weui-tabbar
  background-color: #f5f5f5
</style>

